	<template>
		<view>
			<view class="title" @click="toggle" :style="titleStyle">
				<image v-show="showIcon" class="title-img" :class="openIndex==selfIndex?'title-img-rotate':''" src="/static/course/arrow-round.png"></image>
				<view class="title-content">{{title}}</view>
			</view>
			<slot></slot>
		</view>
	</template>

	<script>
		/**
		 * 点击切换展开/折叠状态
		 * 另一个展开，其它折叠
		 */
		export default{
			props:{
				openIndex:0,//默认是0
				selfIndex:0,//
				title:"",
				titleStyle:{},
				showIcon:{
					type:Boolean,
					default:true
				}
			},
			data(){
				return {
					
				}
			},
			methods:{
				//点击切换 折叠/展开
				toggle(){
					//当前展开，openIndex=1，当前未展开 openIndex=selfIndex
					const tempOpenIndex = this.openIndex==this.selfIndex?-1:this.selfIndex
					this.$emit('updateOpenIndex',tempOpenIndex);
				}
			}
		}
	</script>

	<style lang="less" scoped>
		.title {
			// padding-top: 40upx;
			padding: 50upx 0 0;
			font-size: 28upx;
			color: #333333;
			font-weight: bold;
			display: flex;
			line-height: 1;
		
			&-content {
				flex: 1;
			}
		
			&-img {
				width: 30upx;
				height: 30upx;
				transition: all 0.3s;
				margin-right: 12upx;
		
				&-rotate {
					transform: rotate(180deg);
				}
			}
		}
	</style>
